
<template>
    <div class="spanControl-list" style="width: 100%;margin-left: 0!important;">
        <el-card class="box-card card-head" style="margin: 0px; width: 100%; min-height: 99%">
            <div slot="header" class="clearfix">
                <span>资讯管理</span>
            </div>
            <div class="alert-container clearfix">
                <el-alert  v-for="alert in alerts.successes"  :key="alert.title"
                           v-bind:title="alert.title"
                           type="success"
                           show-icon>
                </el-alert>
                <el-alert  v-for="alert in alerts.infos"  :key="alert.title"
                           v-bind:title="alert.title"
                           type="info"
                           show-icon >
                </el-alert>
                <el-alert  v-for="alert in alerts.warnings"  :key="alert.title"
                           v-bind:title="alert.title"
                           type="warning"
                           show-icon >
                </el-alert>
                <el-alert  v-for="alert in alerts.errors"  :key="alert.title"
                           v-bind:title="alert.title"
                           type="error"
                           show-icon >
                </el-alert>
            </div>
            <div class="text item">
                <el-form ref="informationForm" :model="information" label-width="150px" :rules="rules">
                  <el-col :span="12">
                    <el-form-item label="资讯类型" prop="informationType" style="border-color: white">
                      <select v-model="information.informationType" style="width: 800px;height:30px;background-color:darkgray;border-radius: 0.5em">
                        <option>园区新闻</option>
                        <option>园区公告</option>
                        <option>园区活动</option>
                        <option>园区政策</option>
                      </select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="序列号" prop="serialNumber">
                      <el-input type="input" v-model="information.serialNumber"
                                placeholder="序列号" clearable autosize
                                resize ="both" tabindex=3
                                maxlength=25
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24">
                    <el-form-item label="关键词" prop="keyWords">
                      <el-input type="input" v-model="information.keyWords"
                                placeholder="关键词" clearable autosize
                                resize ="both" tabindex=12
                                maxlength=100
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24">
                    <el-form-item label="标题" prop="informationTitle">
                      <el-input type="input" v-model="information.informationTitle"
                                placeholder="资讯标题" clearable autosize
                                resize ="both" tabindex=4
                                maxlength=100
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24">
                    <el-form-item label="作者" prop="author">
                      <el-input type="input" v-model="information.author"
                                placeholder="作者" clearable autosize
                                resize ="both" tabindex=7
                                maxlength=25
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24">
                    <el-form-item label="来源" prop="source">
                      <el-input type="input" v-model="information.source"
                                placeholder="来源" clearable autosize
                                resize ="both" tabindex=8
                                maxlength=25
                      ></el-input>
                    </el-form-item>
                  </el-col>

                  <el-col :span="24">
                    <el-form-item label="名称" prop="name">
                      <el-input type="input" v-model="information.name"
                                placeholder="名称" clearable autosize
                                resize ="both" tabindex=1
                                maxlength=255
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="首页轮播" prop="homeCarousel">
                      <el-radio-group v-model="information.homeCarousel">
                        <el-radio-button :label="true">是</el-radio-button>
                        <el-radio-button :label="false">否</el-radio-button>
                      </el-radio-group>
                    </el-form-item>
                  </el-col>
                  <el-col :span="18">
                    <el-form-item label="发布时间" prop="creationTime">
                      <el-date-picker clearable
                                      v-model="information.creationTime"
                                      align="right"
                                      type="date"
                                      placeholder="发布时间"
                                      :picker-options="pickerOptionsCreationTime">
                      </el-date-picker>
                    </el-form-item>
                  </el-col>






                                <el-col :span="4" style="float: left">
                                    <el-form-item label="pc发布渠道" prop="publishingToPc">
                                        <el-radio-group v-model="information.publishingToPc">
                                            <el-radio-button :label="true">是</el-radio-button>
                                            <el-radio-button :label="false">否</el-radio-button>
                                        </el-radio-group>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="4">
                                    <el-form-item label="App发布渠道" prop="publishingToApp">
                                        <el-radio-group v-model="information.publishingToApp">
                                            <el-radio-button :label="true">是</el-radio-button>
                                            <el-radio-button :label="false">否</el-radio-button>
                                        </el-radio-group>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="4">
                                    <el-form-item label="微信发布渠道" prop="publishingToWechat">
                                        <el-radio-group v-model="information.publishingToWechat">
                                            <el-radio-button :label="true">是</el-radio-button>
                                            <el-radio-button :label="false">否</el-radio-button>
                                        </el-radio-group>
                                    </el-form-item>
                                </el-col>




                  <el-col :span="24">
                    <el-form-item label="备注" prop="remark">

                      <el-input type="textarea" v-model="information.remark"
                                placeholder="备注" clearable autosize
                                resize ="both" tabindex=10000
                                maxlength=255
                      ></el-input>
                    </el-form-item>
                  </el-col>

                                    <el-col :span="12">
                                        <el-form-item label="内容" prop="content">
                                          <UE :config=config ref="ue"></UE>
                                    </el-form-item>
                                    </el-col>


                            <el-button type="primary" @click="submitInformation()"    :loading="isSubmiting" v-permission:mh_information_Information_Edit >提交</el-button>

                </el-form>
            </div>
            <div class="text item clearfix">
                <el-alert v-for="remark in alerts.remarks"  :key="remark.title"
                          v-bind:title="remark.title"
                          type="info"
                          v-bind:description="remark.content">
                </el-alert>
            </div>
        </el-card>
    </div>
</template>

<script>




import {InformationService} from './InformationService'
import {d4utils} from '../../../tools/d4utils'
import UE from "../../../component/ue"
export default {
    components: {UE},
    data() {
        var validateIntRange = d4utils.validateFloatRange;
        var validateFloatRange = d4utils.validateFloatRange;
        var validateString = d4utils.validateString;

        return {

          config: {

            initialFrameWidth: 1600,
            initialFrameHeight: 150
          },
            rules: {
                name: [
                    {required:  false , message: '请输入名称', trigger: 'blur'},
                    { validator:validateString(0,1000,/^.*$/,"输入的数据不正确，请检查"), trigger: 'blur' },
                    ],
                serialNumber: [
                    {required:  false , message: '请输入序列号', trigger: 'blur'},
                    { validator:validateString(0,1000,/^.*$/,"输入的数据不正确，请检查"), trigger: 'blur' },
                    ],
                informationTitle: [
                    {required:  true , message: '请输入标题', trigger: 'blur'},
                    { validator:validateString(0,1000,/^.*$/,"输入的数据不正确，请检查"), trigger: 'blur' },
                    ],
                creationTime: [
                    { type: 'date',required:  true , message: '请输入发布时间', trigger: 'change'},
                    ],
                informationType: [
                    {required:  false , message: '请输入资讯类型', trigger: 'blur'},
                    { validator:validateString(0,1000,/^.*$/,"输入的数据不正确，请检查"), trigger: 'blur' },
                    ],
                author: [
                    {required:  false , message: '请输入作者', trigger: 'blur'},
                    { validator:validateString(0,1000,/^.*$/,"输入的数据不正确，请检查"), trigger: 'blur' },
                    ],
                source: [
                    {required:  false , message: '请输入来源', trigger: 'blur'},
                    { validator:validateString(0,1000,/^.*$/,"输入的数据不正确，请检查"), trigger: 'blur' },
                    ],
                publishingToPc: [

                    ],
                publishingToApp: [

                    ],
                publishingToWechat: [

                    ],
                keyWords: [
                    {required:  false , message: '请输入关键词', trigger: 'blur'},
                    { validator:validateString(0,1000,/^.*$/,"输入的数据不正确，请检查"), trigger: 'blur' },
                    ],
                homeCarousel: [

                    ],
                // content: [
                //     {required:  true , message: '请输入内容', trigger: 'blur'},
                //     { validator:validateString(0,1000,/^.*$/,"输入的数据不正确，请检查"), trigger: 'blur' },
                //     ],
                remark: [
                    {required:  false , message: '请输入备注', trigger: 'blur'},
                    { validator:validateString(0,1000,/^.*$/,"输入的数据不正确，请检查"), trigger: 'blur' },
                    ],
           },
            isSubmiting: false,
            information:{},
            informationId:null,
            pickerOptionsCreationTime: {
                disabledDate(time) {
                    //TODO: 请在此判断可以输入的日期范围,
                    //return time.getTime() > Date.now();
                    return false;
                },
                shortcuts: [{
                    text: '今天',
                    onClick(picker) {
                        picker.$emit('pick', new Date());
                    }
                }, {
                    text: '昨天',
                    onClick(picker) {
                        const date = new Date();
                        date.setTime(date.getTime() - 3600 * 1000 * 24);
                        picker.$emit('pick', date);
                    }
                }, {
                    text: '一周前',
                    onClick(picker) {
                        const date = new Date();
                        date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', date);
                    }
                }]
            },
            pickerOptionsCreateDatetime: {
                disabledDate(time) {
                    //TODO: 请在此判断可以输入的日期范围,
                    //return time.getTime() > Date.now();
                    return false;
                },
                shortcuts: [{
                    text: '今天',
                    onClick(picker) {
                        picker.$emit('pick', new Date());
                    }
                }, {
                    text: '昨天',
                    onClick(picker) {
                        const date = new Date();
                        date.setTime(date.getTime() - 3600 * 1000 * 24);
                        picker.$emit('pick', date);
                    }
                }, {
                    text: '一周前',
                    onClick(picker) {
                        const date = new Date();
                        date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', date);
                    }
                }]
            },
            pickerOptionsUpdateDatetime: {
                disabledDate(time) {
                    //TODO: 请在此判断可以输入的日期范围,
                    //return time.getTime() > Date.now();
                    return false;
                },
                shortcuts: [{
                    text: '今天',
                    onClick(picker) {
                        picker.$emit('pick', new Date());
                    }
                }, {
                    text: '昨天',
                    onClick(picker) {
                        const date = new Date();
                        date.setTime(date.getTime() - 3600 * 1000 * 24);
                        picker.$emit('pick', date);
                    }
                }, {
                    text: '一周前',
                    onClick(picker) {
                        const date = new Date();
                        date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', date);
                    }
                }]
            },
        alerts:{ remarks:[{title:"功能说明",content:"TODO: 请在这里加上功能说明"},],
                successes:[], //TODO:[{title:'消息内容'},]
                infos:[],
                warnings:[],
                errors:[]},
        }
    },

    methods: {

        addAlert(message,title,type){
            //type 可选的值为:remarks,successes,infos,warnings,errors
            type = type? type:"errors";
            type = this.alerts[type]?type:"errors";
            title = title?title:message;
            this.alerts[type].unshift({title:title,content:message});
        },
        removeAlert(title,type){
            //type 可选的值为:remarks,successes,infos,warnings,errors
            type = type? type:"errors";
            type = this.alerts[type]?type:"errors";
            for (var i = this.alerts[type].length-1; i>=0 ; i--) {
                delete this.alerts[type][i]
            }
        },
        submitInformation() {
            var refs = this.$refs;
            refs['informationForm'].validate(valid => {
            if (valid) {
            if(this.information.eid)//编辑资讯
            {
            this.updateInformation();
            }
            else//保存资讯
            {
            this.saveInformation();
            }
            } else {
            return false
            }
            })
        },
        saveInformation()//保存资讯
        {
            this.isSubmiting = true;
            this.information.content = this.$refs.ue.getUEContent();
            alert(this.information.content);
            if(this.information.content == null){
              alert("内容不能为空")
              return
            }
            InformationService.saveInformation(this.information).then((resp) => {
                this.isSubmiting = false;
                var router = this.$router;
                router.push({path: '/mh/information/information'})
        }).catch((error) => {
            //error的data属性是后台传入的数据,data的extendedData存有后台传入的数据
            this.isSubmiting = false;

            this.addAlert({title:error.data.message})
            this.$message({
                type: 'error',
                message: '保存出错,原因是：'+error.data.message
            })
        })
        },
        updateInformation()//编辑资讯
        {

            this.information.content = this.$refs.ue.getUEContent();
            this.isSubmiting = true;
            InformationService.updateInformation(this.information).then((resp) => {
                this.isSubmiting = false;
                var router = this.$router;
                router.push({path: '/mh/information/information'})
        }).catch((error) => {
            //error的data属性是后台传入的数据,data的extendedData存有后台传入的数据
            this.isSubmiting = false;
            this.addAlert({title:error.data.message})
            this.$message({
                type: 'error',
                message: '保存出错,原因是：'+error.data.message
            })

        })
        },
        findInformationForEdit(informationId)//查找资讯
        {
            InformationService.findInformationForEdit(informationId).then((resp) => {
                this.prepareForEdit(resp.data);
        }).catch((error) => {
            this.$message({
            type: 'error',
            message: '查询资讯出错'
        })
        })
        },
        createInformation()//创建新的资讯
        {
            InformationService.createInformation().then((resp) => {
                this.prepareForEdit(resp.data);
        }).catch((error) => {
            this.$message({
            type: 'error',
            message: '创建新的资讯出错'
        })
        })
        },
        prepareForEdit(informationEditDto)
        {
           let _this = this;
            this.information = informationEditDto.information;
          //    _this.$refs.ue.ready(function(){
          //      _this.$refs.ue.setContent(this.information.content);
          // })

        },

    },
    created() {
        this.informationId = this.$route.params.informationId;
        if(this.informationId)//编辑
        {
            this.findInformationForEdit(this.informationId);
        }
        else//新增
        {
            this.createInformation();
        }
    },
}
</script>
<style scoped lang="scss">

</style>
